Ergomania — Brand System
Ergomania
Open the app preview
The visual identity

Pearlescent Therapeutic Modernism.

Organic clinical calm: opal softness and hand-built architectural warmth, wrapped around a fast, disciplined documentation tool. Therapist-facing — never childish, never sterile.

The formula
80% clean clinical interface
15% organic
5%

Work happens on ivory. Warmth lives in shape, wood, and type. Pearl is the last five percent — atmosphere only, never under dense text.

Color

Fifteen tokens in five families. Deep walnut, plum, and charcoal carry every word of body text — pastels never do.

Surfaces
Warm ivory #F8F3EA
Deep ivory #EFE6D7
Opal pearl #EBE8F1
Pearl pink #F6E9F4
Pearl accents
Soft lavender #C3C2E5
Blush pink #E7AED7
Rose mauve #CC80C3
Powder blue #AFCFEA
Glass
Aqua glass #3CAFD4
Cobalt glass #2E7CCB
Earth
Warm wood #A58164
Soft gold #CEAF92
Text & depth
Deep walnut #4B2615
Deep plum #38243D
Charcoal #2C2420

Material language

Six materials, translated from opal and architecture into interface surfaces.

Pearlescent opal

Hero backdrops and empty states, at low opacity. Never behind forms or notes.

Warm ivory paper

The working surface. Every form, plan, and note sits on clean ivory or white.

Polished walnut

Depth and authority: text, primary buttons, the app's structural chrome.

Soft stained glass

Circular chips carry status: ratings, phases, nav markers, progress dots.

Curved plaster

Arched section shapes and generous radii — walls that curve, not corners that cut.

Translucent glass

Floating bars and modals blur what's beneath — light, never murky.

Shape

Arches for moments, cards for work, pills for actions, circles for status. Radii: 14 / 20 / 30 / 42 / pill.

Arch
Card · 20px
Pill action
Pill
Status circles

Type

Display — Young Serif
A softer intelligence.
Body & UI — Figtree
Warm, precise, professional. Forms, notes, and clinical copy stay humanist and highly legible.
Data — Spline Sans Mono
E-042 · CS-REG-01 · OTVS-TRANS-03

Dos and don'ts

Do
  • Set body text in deep walnut, plum, or charcoal — always.
  • Keep forms and clinical notes on clean ivory or white panels.
  • Use pearl texture as atmosphere at the edges of the page.
  • Use circles and arches to carry status and moments of arrival.
  • Show draft / approved state on every AI artifact.
  • Respect reduced-motion preferences everywhere.
Don't
  • Pastel text on pastel backgrounds — never, at any size.
  • Texture behind dense body text or data entry.
  • Generic SaaS gradients or cold medical-blue dashboards.
  • Childish therapy branding or spa/wellness cliché.
  • Decoration that slows documentation by a single second.
  • AI output presented as final without an approval affordance.